<template>
  <div class = "body">
    <user-head></user-head>
    <el-table ref="table" :data="tableData" highlight-current-row style="width: 100%">
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column label="商品图片" width="120">
        <template slot-scope="scope">
          <el-image :src="path + 'image/' + scope.row.picUrl" fit="fit"></el-image>
        </template>
      </el-table-column>
      <el-table-column property="bookName" label="书籍名称" width="120"></el-table-column>
      <el-table-column property="price" label="单价"></el-table-column>
      <el-table-column property="num" label="数量"></el-table-column>
      <el-table-column label="总价" :formatter="formatterTotal"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="remove(scope.row)" type="text" size="small">移出</el-button>
          <el-button @click="buy(scope.row)" type="text" size="small">购买</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="选择收货地址" :visible.sync="dialogFormVisible" v-dialogDrag append-to-body>
      <el-button @click="add" size="small" v-show="select">新增地址</el-button>
      <el-select v-model="address" placeholder="请选择收获地址" v-show="select">
        <el-option v-for="each in addresses" :key="each.id" :label="each.address" :value="each.id"></el-option>
      </el-select>
      <el-input v-model="address" placeholder="请填写收获地址" v-show="!select"></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="define()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import GLOBAL from "../../Global.vue";
import Head from "./Head.vue";
export default {
  components: {
    "user-head": Head,
  },
  data() {
    return {
      path: GLOBAL.BASE_URL,
      tableData: [],
      dialogFormVisible: false,
      addresses: [],
      address: "",
      select: true,
      row:{},
    };
  },
  methods: {
    define() {
      this.dialogFormVisible = false;
      if (!this.select) {
        //将地址上传到数据库
        var user = JSON.parse(localStorage.user);
        this.COMMON.httpPost(
          this,
          "addressOperation/insert",
          { userId: user.id, address: this.address },
          (result) => {
            if (result.result === "SUCCESS") {
              this.address = result.data.id;
              this.placeOrder();
            }
          },
          (result) => {}
        );
      } else {
          this.placeOrder();
      }
    },
    //下单
    placeOrder() {
      var user = JSON.parse(localStorage.user);
      this.COMMON.httpPost(
        this,
        "ordersOperation/placeOrder",
        { userId: user.id, addressId: this.address ,num:this.row.num,bookId:this.row.bookId,price:this.row.price * this.row.num},
        (result) => {
          if (result.result === "SUCCESS") {
            this.remove(this.row);
          }
        },
        (result) => {}
      );
    },
    add() {
      this.select = false;
    },
    buy(row) {
      this.select = true;
      this.getAddress();
      this.dialogFormVisible = true;
      this.row = row;
    },
    remove(row) {
      var user = JSON.parse(localStorage.user);
      this.COMMON.httpPost(
        this,
        "shoppingCartOperation/delete",
        { id: row.id },
        (result) => {
          if (result.result === "SUCCESS") {
            this.getShoppingCart();
          }
        },
        (result) => {}
      );
    },
    formatterTotal(row, column, cellValue, index) {
      return row.price * row.num;
    },
    // 获取用户填写的收获地址
    getAddress() {
      var user = JSON.parse(localStorage.user);
      this.COMMON.httpPost(
        this,
        "addressOperation/selectList",
        { userId: user.id },
        (result) => {
          if (result.result === "SUCCESS") {
            this.addresses = result.list;
          }
        },
        (result) => {}
      );
    },
    getShoppingCart() {
      var user = JSON.parse(localStorage.user);
      this.COMMON.httpPost(
        this,
        "shoppingCartOperation/getShoppingCart",
        {},
        (result) => {
          if (result.result === "SUCCESS") {
            this.tableData = result.list;
          }
        },
        (result) => {}
      );
    },
  },
  created: function () {
    this.getShoppingCart();
  },
};
</script>

<style>
.body {
  width: 100%;
  height: 100%;
  overflow: auto;
  margin: 0px;
  padding: 0;
}

</style>